<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css">
    <link rel="stylesheet" href="../../css/adminLogin.css">
</head>
<body>
<div class="wrap">
    <img src="../../images/bg.jpg" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <h1 style="margin-top: 15px;margin-left: 0px">燃气公司管理系统</h1>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-ic.on-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv"  >
                <div class="submitDiv" style="margin-left: 140px" >
                    <input id="loginBtn" type="button"  class="submit layui-btn layui-btn-primary" value="登录">
                </div>
				<div class="submitLabel" style="color: #0000FF; margin-left: 140px; margin-top: 5px;">
				    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
				</div>
            </div>
        </form>
    </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" type="text/javascript"></script>
<script>
    layui.use(['layer'],function () {
        var layer = layui.layer;
    })
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            parent.layer.open({
                type:2,    //弹出一个页面层
                title:"注册",
                content:'register.html',
                area: ['500px', '400px'],
                anim:1
            })
        });
    });
    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }
    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if ($.trim(loginUsername) === '' || $.trim(loginUsername).length<=0){
            layer.alert("用户名不能为空",{icon: 5});
            return false;
        }
        if ($.trim(loginPassword) === '' || $.trim(loginPassword).length<=0){
            // layer.msg("删除失败", {icon: 5});
            layer.alert("密码不能为空",{icon: 5});
            return false;
        }
        if (inputCode.length<=0){
            layer.alert("验证码不能为空",{icon: 5});
            return false;
        }
        if (inputCode !== cardCode){
            layer.alert("请输入正确验证码",{icon: 5});
            return false;
        }
        return true;
    }
    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var d={"username":loginUsername,"password":loginPassword};
            $.ajax({
                url:'http://localhost:8081/admin/login',
                data:JSON.stringify(d),
                type:"post",
                dataType:'json',
                contentType: "application/json;charset=utf-8",
                success:function (data){
                    if (data.msg==="用户名不存在！"){
                        layer.alert("用户名不存在",{icon: 5});
                    }else if(data.msg==="密码错误")
					{
						layer.alert("密码错误",{icon: 5});
					}
					else{
                        window.self.location="../../index.html"
                    }
                },
                error:function () {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                }
            });
        }

    }
</script>
</body>
</html>
